<template>
  <div ref="chartContainer" style="width: 600px; height: 400px"></div>
</template>

<script>
  import * as echarts from 'echarts'
  import 'echarts-gl' // 引入 ECharts 的 3D 扩展包

  export default {
    name: 'PieChart3D',
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        const chart = echarts.init(this.$refs.chartContainer)

        const option = {
          title: {
            text: '3D 饼图示例',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '搜索引擎' },
                { value: 735, name: '直接访问' },
                { value: 580, name: '邮件营销' },
                { value: 484, name: '联盟广告' },
                { value: 300, name: '视频广告' }
              ],
              roseType: 'angle',
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                show: true,
                formatter: '{b}: {@[2]} ({d}%)'
              },
              itemStyle: {
                borderRadius: 4
              },
              // 使用 ECharts GL 来支持 3D 效果
              globe: {
                baseTexture: 'asset/earth.jpg'
              },
              zlevel: 10
            }
          ]
        }

        // 注意：ECharts 默认不支持 3D 饼图，需要使用 echarts-gl 插件。
        // 确保在上面正确引入了 echarts-gl。

        chart.setOption(option)
      }
    }
  }
</script>

<style scoped>
  /* 如果需要自定义样式，请在这里添加 */
</style>
